function Slider(id) {
    this.sliderBox = document.getElementById(id); //轮播区域
    this.sliderList = this.sliderBox.querySelector(".sliderList"); //包含轮播区块的ul
    this.lists = this.sliderList.children; //轮播区块
    this.len = this.lists.length;

    this.i = 0;
    this.timer = null;

    this.autoplay(); //自动播放
    this.clearStart();
}

Slider.prototype.move = function () {
    this.i++;

    if (this.i == this.len) {
        this.i = 0;
    }
    if (this.i == -1) {
        this.i = this.len - 1;
    }

    if (this.points) { //判断的原因是因为 move方法会在自动播放时就去执行，这时不一定有小圆点，直接用，可能会报错

        for (let j = 0; j < this.points.length; j++) {
            this.points[j].className = "";
        }


        this.points[this.i].className = "hover";



    }

    for (let i = 0; i < this.len; i++) {
        startMove(this.lists[i], {
            "opacity": 0
        });
    }

    startMove(this.lists[this.i], {
        "opacity": 100
    });
}

Slider.prototype.autoplay = function () {
    this.timer = setInterval(() => {
        this.move();
    }, 3000);
}

Slider.prototype.addArr = function () {
    let oDiv = document.createElement("div");
    oDiv.className = "arrow";
    oDiv.innerHTML = "<span>&lt;</span><span>&gt;</span>";

    this.sliderBox.appendChild(oDiv);

    let lArr = oDiv.children[0];
    let rArr = oDiv.children[1];

    rArr.onclick = () => {
        this.move();
    }
    lArr.onclick = () => {
        this.i -= 2;
        this.move();
    }

}

Slider.prototype.addPoint = function () {
    let oUl = document.createElement("ul");
    oUl.className = "num";
    this.sliderBox.appendChild(oUl);
    let str = "";
    for (let i = 0; i < this.len; i++) {
        str += `<li></li>`;
    }
    oUl.innerHTML = str;

    this.points = oUl.children;
    this.points[0].className = "hover";

    for (let i = 0; i < this.points.length; i++) {
        this.points[i].onmouseover = () => {
            this.i = i - 1;
            this.move();
        }
    }



}

Slider.prototype.clearStart = function () {
    this.sliderBox.onmouseover = () => {
        clearInterval(this.timer);
    }
    this.sliderBox.onmouseout = () => {
        this.timer = setInterval(() => {
            this.move();
        }, 3000)
    }
}